<template>
  <div id="app">

    <!-- 调用v-offset指令 -->
    <h1 v-offset="obj">我是自定义指令h1标签,加载时改变位置</h1>

    <button id="btn1" @click="updater">点击我改变h1标签的位置</button><br>
    <button @click="unbindEvent">解绑h1标签指令</button>

    <div v-scroll="scrollLoad">
      <p>我是自定义指 滚动到底部试试</p>
      <p>我是自定义指 滚动到底部试试</p>
      <p>我是自定义指 滚动到底部试试</p>
      <p>我是自定义指 滚动到底部试试</p>
      <p>我是自定义指 滚动到底部试试</p>
      <p>我是自定义指 滚动到底部试试</p>
      <p>我是自定义指 滚动到底部试试</p>
      <p>我是自定义指 滚动到底部试试</p>
      <p>我是自定义指 滚动到底部试试</p>
      <p>我是自定义指 滚动到底部试试</p>
      <p>我是自定义指 滚动到底部试试</p>
      <p>我是自定义指 滚动到底部试试</p>
      <p>我是自定义指 滚动到底部试试</p>
    </div>

  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      obj: {
        top:40,
        left: 250,
      }
    }
  },
  methods: {

    /**
     * 手动改变h1标签位置
     */
    updater() {
      this.obj.top += 3;
      this.obj.left += 3;
    },

    /**
     * 获取窗口信息
     */
    scrollLoad() {
      let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
      let bodyHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
      if(scrollTop + window.innerHeight >= bodyHeight) {
        alert('到底部了')
      }
    },

    /**
     * 解绑h1标签指令
     */
    unbindEvent() {
      this.$destroy();
    }
  }
}
</script>

<style>
*{
  margin: 0;
  padding:0;
}
body{
  height: 1500px;
}
button{
  margin: 50px;
}
</style>
